<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TRIANGLE_FAN</title>

    <style>
        body {
            margin: 0;
            overflow: hidden;
        }

        canvas {
            border: 3px solid blue;
            display: block;
        }
    </style>


</head>
<body>
<canvas id="render" width="800" height="600"></canvas>
<script type="text/javascript" src="../libs/shader.js"></script>
<script type="text/javascript" src="../libs/webgl-utils.js"></script>
<script id="vShader" type="x-shader/x-vertex">
        attribute vec2 a_position;
        attribute vec4 a_color;
        uniform vec2 u_resolution;
        varying vec4 v_color;
        void main()
        {
            vec2 p = a_position / u_resolution;
            vec2 k = p * 2.0 - 1.0;

            gl_Position = vec4(k * vec2(1, -1), 0, 1);
            v_color = a_color;
        }
    </script>

<script id="fShader" type="x-shader/x-fragment">
        #ifdef GL_ES
        precision mediump float;
        #endif
        varying vec4 v_color;
        void main()
        {
            gl_FragColor = v_color;
        }
    </script>

<script type="text/javascript">
    let canvas = undefined;
    let gl = undefined;
    let program = undefined;
    let vertices = [
        100, 100,
        600, 100,
        600, 400,
        100, 400
    ];

    let color = randomColor();

    function main() {
        canvas = document.getElementById('render');
        gl = canvas.getContext('webgl', {antialias:true, depth: false});
        if(!gl) {
            alert("当前浏览器不支持WebGL，请换另一个浏览器试一下！");
        }

        let vShaderText = document.getElementById('vShader').text;
        let fShaderText = document.getElementById('fShader').text;
        program = initShader(gl, vShaderText, fShaderText);

        program.pLocation = gl.getAttribLocation(program, 'a_position');
        program.cLocation = gl.getAttribLocation(program, 'a_color');
        program.reLocation = gl.getUniformLocation(program, 'u_resolution');

        program.pBuffer = gl.createBuffer();
        program.pBuffer.itemSize = 2;

        gl.bindBuffer(gl.ARRAY_BUFFER, program.pBuffer);

        program.cBuffer = gl.createBuffer();
        program.cBuffer.itemSize = 4;
        gl.bindBuffer(gl.ARRAY_BUFFER, program.cBuffer);

        drawScene(gl, program, color);
        render();

    }

    function randomColor() {
        return [
            1.0, 0.0, 0.0, 1.0,
            1.0, Math.sin(Math.random()), Math.cos(Math.random()), 1.0,
            Math.sin(Math.random()), Math.cos(Math.random()), 1.0, 1.0,
            0.0, 0.0, 1.0, 1.0
        ]
    }

    function drawScene(gl, program, color) {
        webglUtils.resizeCanvasToDisplaySize(gl.canvas);

        gl.viewport(0.0, 0.0, gl.canvas.width, gl.canvas.height);
        gl.clearColor(0.0, 0.0, 0.0, 1.0);
        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

        gl.useProgram(program);

        gl.enableVertexAttribArray(program.pLocation);
        gl.bindBuffer(gl.ARRAY_BUFFER, program.pBuffer);
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
        gl.vertexAttribPointer(program.pLocation, program.pBuffer.itemSize, gl.FLOAT, false, 0, 0);

        gl.enableVertexAttribArray(program.cLocation);
        gl.bindBuffer(gl.ARRAY_BUFFER, program.cBuffer);
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(color), gl.STATIC_DRAW);
        gl.vertexAttribPointer(program.cLocation, program.cBuffer.itemSize, gl.FLOAT, false, 0, 0);

        gl.uniform2f(program.reLocation, gl.canvas.width, gl.canvas.height);

        gl.drawArrays(gl.TRIANGLE_FAN, 0, vertices.length / 2);
    }

    function render() {
        color = randomColor();
        drawScene(gl, program, color);
        requestAnimationFrame(render);
    }

    main();
</script>

</body>
</html>